<template>
  <div style="margin: 10px;">
    <el-form ref="form" label-position="top">
      <div>
        <el-form-item label="请选择模型" v-if="$route.query.type != 2">
          <el-select ref="changeRef" @change="changeValue" v-model="value" placeholder="请选择" style="width: 100%;">
            <el-option v-for="item in modelList" :key="item.modelCode" :label="item.modelName" :value="item.modelCode">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备模型参数" v-if="$route.query.type != 2">
          <el-table ref="multipleTable" height="250px" :data="tableData" tooltip-effect="dark" style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="parKey" label="代码">
            </el-table-column>
            <el-table-column prop="parValue" label="名称" show-overflow-tooltip>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item label="设备模型参数修改">
          <el-table ref="multipleTable" height="250px" :data="multipleSelection" tooltip-effect="dark" style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column prop="parKey" label="代码">
            </el-table-column>
            <el-table-column prop="parValue" label="参数名称">
            </el-table-column>
            <el-table-column align="center" prop="seqValue" label="值">
              <template slot-scope="scope">
                <el-input v-model="scope.row.seqValue" placeholder="值" :disabled="$route.query.type == 2" />
              </template>
            </el-table-column>
            <!-- <el-table-column label="删除">
              <template slot-scope="scope">
                <el-button @click="delete(scope.row)">删除</el-button>
              </template>
            </el-table-column> -->
          </el-table>
        </el-form-item>

      </div>

    </el-form>
    <div style="width: 100%; text-align: center;" v-if="$route.query.type != 2">

      <el-button type="primary" @click="saveEditList">保存</el-button>
    </div>


  </div>
</template>

<script>
import { queryDeviceModelList, queryDeviceModelParamChangeList } from "@/api/workflow/index"
import { queryDeviceModelParamList } from "@/api/workflow/index"
export default {
  data () {
    return {
      value: '',
      tableData: [],
      modelList: [],
      multipleSelection: [],
    }
  },
  props: {
    capList: {
      type: String,
      default: ""
    },
  },
  mounted () {
    if (this.capList) {
      this.multipleSelection = JSON.parse(this.capList)
    }
    this.getDeviceModelList()
  },
  methods: {
    // toggleSelection (rows) {
    //   if (rows) {
    //     rows.forEach(row => {
    //       this.$refs.multipleTable.toggleRowSelection(row)
    //     })
    //   } else {
    //     this.$refs.multipleTable.clearSelection()
    //   }
    // },
    async getDeviceModelList () {
      const res = await queryDeviceModelList()
      if (res.status == 200) {
        this.modelList = res.object
      }
    },
    async getDeviceModelParamChangeList (code) {
      const res = await queryDeviceModelParamChangeList({
        modelCode: code
      })
      if (res.status == 200) {
        this.tableData = res.object
      }
    },
    handleSelectionChange (val) {
      this.multipleSelection = JSON.parse(JSON.stringify(val))
    },
    saveEditList () {
      let data = []

      this.multipleSelection.forEach(element => {
        data.push({
          ...element,
          parameterCode: element.parKey,
          parameterName: element.parValue,
          deviceModelCode: this.$refs.changeRef.selected.value ? this.$refs.changeRef.selected.value : element.deviceModelCode,
          deviceModelName: this.$refs.changeRef.selected.label ? this.$refs.changeRef.selected.label : element.deviceModelName,
        })
      })
      this.$emit('addMessage', data)
    },
    changeValue (val) {
      this.getDeviceModelParamChangeList(val)
    }
  }
}
</script>


<style></style>
